<template>
  <view class="bg-white">
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
                 @scrolltolower="lower" >

      <view class="margin-sm" v-for="item in updatesList">
        <uni-row class="demo-uni-row">
          <uni-col :span="4">
            <view class="avatar flex align-center justify-center">
              <image :src="item.title"></image>
            </view>
          </uni-col>
          <uni-col class="right" :span="20">
            <view class="padding-left-sm padding-right-sm">
              <view class="text-df flex align-center justify-between">
                <view class="name text-bold">{{item.nickName}}</view>
                <view class="text-grey">{{item.createTime}}</view>
              </view>
              <view>{{item.content}}</view>
              <view>
                <uni-grid :column="3" :square="false" :highlight="false" @change="change">
                  <uni-grid-item v-for="(item, index) in item.gridImgList" :index="index" :key="index">
                    <view class="flex align-center justify-center">
                      <image :src="item.url" class="gridImage"  :lazyLoad="true" mode="aspectFill" />
                    </view>
                  </uni-grid-item>
                </uni-grid>

              </view>
            </view>
          </uni-col>
        </uni-row>
      </view>
      <uni-fab ref="fab"  horizontal="right" vertical="bottom" @fabClick="fabClick" />


    </scroll-view>
  </view>
</template>

<script>
import {getMyUpdatesList} from "../../api/flower/updates";
import {baseUrl} from "../../config";

export default {
  name: "index",
  data() {
    return {
      updatesList:[],
      cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
      scrollTop: 0,
    }
  },
  onShow() {
    //this.scrollTop = 0
    this.findList();
    console.log("onShow");
  },
  mounted() {
    this.findList();

  },
  methods: {
    lower: function(e) {
      console.log(e)
    },
    //查询所有动态的列表
    findList(){
      let that = this;
      //查询所有帖子
      getMyUpdatesList({
        page: 1,
        pageSize: 100
      }).then(res => {
        let rows = res.rows;
        //row中grid_img_urls是用逗号分割的字符串，需要转换为数组、
        for(let i = 0;i<rows.length;i++){
          //title前面加baseUrl
          rows[i].title = baseUrl + rows[i].title;
          let gridImgUrls = rows[i].gridImgUrls;
          let arr = gridImgUrls.split(",");
          let gridImgList = [];
          //遍历arr
          for(let j = 0;j<arr.length;j++){
            //前面加baseUrl
            gridImgList.push({
              url:baseUrl+arr[j],
            })
          }
          rows[i].gridImgList= gridImgList;
        }
        that.updatesList=rows;
      })

    },
    change(e) {
      let {
        index
      } = e.detail
      this.list[index].badge && this.list[index].badge++

      uni.showToast({
        title: `点击第${index+1}个宫格`,
        icon: 'none'
      })
    },
    fabClick(){
      console.log("点击了");
      uni.navigateTo({
        url: '/pages/myDynamic/publishDynamic'
      })
    }

  },

}
</script>

<style lang="less" scoped>
.scroll-Y {
  height: calc(100vh - 45px);
}
.avatar{
  //border-radius: 6px;
  image{
    width:50px;
    height: 50px;
    border-radius: 6px;
  }
}
.right{
  //padding: 10px;
  .name{
    color: rgb(96, 114, 152);
  }
}
.gridImage{
  width: 100%;
  height: 80px;
}


</style>